<div id="banner">
    {{hyContact[id]['nickName'] }}
    <span id="back-arrow" ng-click="backward()" ></span>
    <span id="people-group" ng-click="add()"></span>
</div>
<div id="anonymous-banner" ng-show="anonymousMode">
    匿名模式
</div>
<div id="chatting-widget">
    <table class="message" scroll-to-bottom ng-repeat="message in hyMessage | hyMessageOfSomeOne:id:hyContact:hyUser track by message.time">
        <tbody ng-switch="message.type">
        <tr ng-switch-when="message">
            <td class="message-icon" ng-hide="message.sender == hyUser.id" ng-click="showPersonalInfo(message.sender)">
                <img ng-src="{{'assets/'+hyContact[message.sender].iconPath}}">
            </td>
            <td style="vertical-align: bottom;">
                <div class="message-container" ng-class="{true:'my',false:'your'}[(message.sender == hyUser.id)]">
                    <div class="message-id">
                        {{(message.sender == hyUser.id)?(hyUser.nickName):hyContact[message.sender]['nickName']}}
                    </div>
                    <pre>
                        {{message.content}}
                    </pre>
                    <span class="triangle" ng-class="{true:'right',false:'left'}[(message.sender == hyUser.id)]">
                    </span>
                    <span class="triangle triangle-inner" ng-class="{true:'right',false:'left'}[(message.sender == hyUser.id)]">
                    </span>
                </div>
            </td>
            <td class="message-icon" ng-show="message.sender == hyUser.id">
                <img ng-src="{{'assets/'+hyUser.iconPath}}">
            </td>
        </tr>
        <tr ng-switch-when="picMessage">
            <td class="message-icon" ng-hide="message.sender == hyUser.id">
                <img ng-src="{{'assets/'+hyContact[message.sender].iconPath}}">
            </td>
            <td style="vertical-align: bottom;">
                <div class="message-container" ng-class="{true:'my',false:'your'}[(message.sender == hyUser.id)]">
                    <div class="message-id">
                        {{(message.sender == hyUser.id)?(hyUser.nickName):hyContact[message.sender]['nickName']}}
                    </div>
                    <img ng-src="{{'assets/'+message['picPath']}}" style="max-width:200px"/>
                    <span class="triangle" ng-class="{true:'right',false:'left'}[(message.sender == hyUser.id)]">
                    </span>
                    <span class="triangle triangle-inner" ng-class="{true:'right',false:'left'}[(message.sender == hyUser.id)]">
                    </span>
                </div>
            </td>
            <td class="message-icon" ng-show="message.sender == hyUser.id">
                <img ng-src="{{'assets/'+hyUser.iconPath}}">
            </td>
        </tr>
        <tr  ng-switch-when="inviteMessage">
            <td>
                <div class="text-center">
                    {{((message.sender == hyUser.id)?hyUser.nickName:hyContact[message.sender]['nickName'])+' 邀请'+message['receiverNickName']+'加入群聊' }}
                </div>
            </td>
        </tr>
        <tr ng-switch-when="anonyMessage">
            <td class="message-icon" ng-hide="message.isMe">
                <img src="assets/img/icon/1.jpg" />
            </td>
            <td style="vertical-align: bottom;">
                <div class="message-container" ng-class="{true:'my',false:'your'}[(message.isMe)]">
                    <div class="message-id">
                        {{message.senderNickName}}
                    </div>
                    <pre>
                        {{message.content}}
                    </pre>
                    <span class="triangle" ng-class="{true:'right',false:'left'}[(message.isMe)]">
                    </span>
                    <span class="triangle triangle-inner" ng-class="{true:'right',false:'left'}[(message.isMe)]">
                    </span>
                </div>
            </td>
            <td class="message-icon" ng-show="message.isMe">
                <img src="assets/img/icon/1.jpg" />
            </td>
        </tr>
        <tr ng-switch-when="anonyPicMessage">
            <td class="message-icon" ng-hide="message.isMe">
                <img src="assets/img/icon/1.jpg" />
            </td>
            <td style="vertical-align: bottom;">
                <div class="message-container" ng-class="{true:'my',false:'your'}[(message.isMe)]">
                    <div class="message-id">
                        {{message.senderNickName}}
                    </div>
                    <img ng-src="{{'assets/'+message['picPath']}}" style="width:60px"/>
                    <span class="triangle" ng-class="{true:'right',false:'left'}[(message.isMe)]">
                    </span>
                    <span class="triangle triangle-inner" ng-class="{true:'right',false:'left'}[(message.isMe)]">
                    </span>
                </div>
            </td>
            <td class="message-icon" ng-show="message.isMe">
                <img src="assets/img/icon/1.jpg" />
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div id="message-input-container">
    <div class="row">
        <div class="col-xs-12  text-center">
            <div class="col-xs-8" style="padding: 0">
                <textarea  id="message-input" placeholder="输入聊天信息" ng-model="content" ></textarea>
            </div>
            <div class="col-xs-2" style="padding: 0">
                <span class="chat-pic-input file-input-span">
                    <input type="file" nv-file-select="" uploader="uploader"  multiple />
                </span>
            </div>
            <div class="col-xs-2" style="padding: 0;">
                <button type="button" ng-click="respond()" class="btn btn-block btn-main btn-blue" >回复</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="inviteModal" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">群聊成员 </h4>
                <div style="overflow: hidden">
                    <div ng-repeat="member in hyContact[id]['member']" style="float: left;margin-right: 10px;text-align: center">
                        <img ng-src="{{'assets/'+hyContact[member].iconPath}}" alt="" style="width: 40px;"/>
                        <div>
                            {{hyContact[member].nickName}}
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer" style="margin-top: 0px">
                <h4 class="text-left">邀请加入群聊 </h4>
                <form>
                    <div class="contact" ng-repeat="contact in hyContact | hyContactToInvite : id" style="padding: 0px;margin-bottom: 10px">
                        <div class="contact-icon">
                            <img ng-src="{{'assets/'+contact.iconPath}}" alt="头像"/>
                            <span class="grey-cross" ng-hide="contact.online"></span>
                        </div>
                        <span>{{contact.nickName}}</span>
                        <input type="checkbox" class="invite-checkbox" ng-model="inviteList[contact.id]"/>
                    </div>
                </form>
                <button type="button" ng-click="sendInvite()" class="btn btn-main btn-blue btn-block" ng-disabled="!checkInviteList()">发送</button>

                <button type="button" ng-click="anonymousChattingStart()" ng-hide="anonymousMode" class="btn btn-main btn-blue btn-block" style="margin-top: 10px">开启匿名聊天</button>
                <button type="button" ng-click="anonymousChattingStop()" ng-show="anonymousMode"class="btn btn-main btn-blue btn-block" style="margin-top: 10px">关闭匿名聊天</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">用户个人资料</h4>
            </div>
            <div class="modal-body">
                <div class="config-protrait">
                    头像
                    <img class="portrait" ng-src="{{'assets/'+infoPeople.iconPath}}" style="right:0px" alt=""/>
                </div>
                <div class="config-item">
                    <span>昵称</span>
                    <span class="item-content">{{infoPeople.nickName}}</span>
                </div>
                <div class="config-item" ng-show="infoPeople.public">
                    <span>个性签名</span>
                    <span class="item-content">{{infoPeople.motto}}</span>
                </div>
                <div class="config-item" ng-show="infoPeople.public">
                    <span>具体坐标</span>
                    <span class="item-content">{{infoPeople.position}}</span>
                </div>
                <div class="config-item" ng-show="infoPeople.public">
                    <span>年龄</span>
                    <span class="item-content">{{infoPeople.age}}</span>
                </div>
            </div>
        </div>
    </div>
</div>